<template>
	<view class="login-index">
		<view class="avatar-border">
			<button open-type="chooseAvatar" @chooseavatar="ChooseAvatar" class="user-image">
				<u-image :src="avatarUrl" width="120rpx" mode="widthFix" border-radius="60"></u-image>
			</button>
		</view>
		<view class="input-border">
			<text>昵称</text>
			<u-input type="text" v-model="nickname" :clearable="false" style="width: 400rpx;"></u-input>
		</view>
		<button class="submit-wechat" type="primary" @click="submitWx">保存</button>
		
		<u-modal v-model="showLogin" :show-cancel-button="true" content="请授权手机号">
			<button slot="confirm-button" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" class='authorization'>
				确定
			</button>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				avatarUrl : '',
				nickname: '',
				
				showLogin:false
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onLoad() {
			this.avatarUrl  = this.userInfo.avatarUrl || 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
			this.nickname = this.userInfo.nickName || ''
		},
		methods: {
			...mapActions(['setUser']),
			ChooseAvatar(e){
				
				this.avatarUrl  = e.detail.avatarUrl
			},
			submitWx(){
				if (this.nickname == '') {
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					})
					return
				}
				this.showLogin = true
				let that = this
				let url = that.$net.base + '/upload/image'
				uni.uploadFile({
					url: url,
					filePath: that.avatarUrl ,
					name: 'file',
					success: (res) => {
						let res1 = JSON.parse(res.data)
						that.avatarUrl = res1.url
					},
					fail: (err) => {
						
					},
					complete() {
						that.updateUser()
					}
				})
			},
			updateUser(){
				let data = {
					avatarUrl: this.avatarUrl,
					nickName: this.nickname
				}
				this.$net.req('/user/update', {data}, false).then(res => {
					if (res.code == 200) {
						this.setUser(data)
					}
				})
			},
			getPhoneNumber(e){
				if(e.detail.errMsg === 'getPhoneNumber:ok'){
					let data = {
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					}
					this.$net.req('/user/getMobile', data, false).then(res=>{
						if(res.code == 200){
							uni.showToast({
								title: '绑定成功',
								icon: 'none',
								mask: true
							})
							this.getUser_info()
						}
					})
				}else{
					uni.showToast({
						title: '用户拒绝授权',
						icon: 'none',
						mask: true
					})
					return
				}
			},
			getUser_info(){
				this.$net.req('/user/getMine', {}, false).then(res => {
					if(res.code==200){
						store.commit('setUser', res.data);
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.login-index{
		background-color: #FFFFFF;
		min-height: 100vh;
		
		.avatar-border{
			padding-top: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.input-border{
			display: flex;
			border-top: 2rpx solid #DCDFE6;
			border-bottom: 2rpx solid #DCDFE6;
			align-items: center;
			padding: 0 40rpx;
			margin-top: 40rpx;
			text{
				margin-right: 20rpx;
			}
		}
		
		.submit-wechat{
			position: fixed;
			bottom: 40rpx;
			margin-bottom: calc(env(safe-area-inset-bottom)/2);
			left: 0;
			margin: 0 30rpx;
			width: 690rpx;
			z-index: 999;
		}
		
		.user-image{
			background: none;
			border: none;
			&::after{
				border: none;
			}
		}
	}
</style>
